<html>
    <head>
        <title>PhoneGap</title>
        <style>
            @font-face {font-family:"Source Sans";src:url(../font/SourceSansPro-Regular.otf)}
            @font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Light.otf);font-weight:200}
            @font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Semibold.otf);font-weight:600}
        </style>

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel='stylesheet' type='text/css' href='css/animate.css'>
        <link rel="stylesheet" type="text/css" href="css/topcoat-desktop-light-custom.min.css">
        <link rel="stylesheet" type="text/css" href="css/topcoat-overlay-custom.min.css">
        <link rel="stylesheet" type="text/css" href="css/overlays.css">
        <link rel="stylesheet" type="text/css" href="css/flexboxgrid.min.css">
        <link rel="stylesheet" type="text/css" href="css/flipper.css">
        <link rel="stylesheet" type="text/css" href="css/loader.css">

    </head>
    <body style="overflow-x: hidden; overflow-y: hidden;" id="body">

        <div id="loading-overlay" class="loading-overlay">
            <div id="loading-overlay-sidebar" class="loading-overlay-sidebar"></div>
            <div id="loading-overlay-content" class="loading-overlay-content">
                <div id="loader-text" class="loader-text"></div>
                <div class="loader"></div>
                <p class="loaderText"></p>
            </div>
        </div>

        <div id="overlay-bg" class="topcoat-overlay-bg-grey"></div>

        <aside id="updateOverlay" class="update-overlay">
            <div class="overlay-form-item-heading" id="updateOverlayTitle"></div>
            <div class="overlay-form-item settings-ip-label" id="updateOverlayPrompt"></div>
            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item">
                <button id="updateLater" class="cancel-button">Update Later</button>
                <button id="updateNow" class="action-button">Update Now</button>
            </div>
        </aside>

        <aside id="settingsOverlay" class="settings-overlay">
            <div class="overlay-form-item-heading">Server port:</div>
            <div class="overlay-form-item"><span id="settings-ip" class="settings-ip-label"></span><input type="text" id="portNumber" class="text-input settings-port-number-input" maxlength="5"></div>
            <div class="overlay-form-item overlay-form-item-description">This is the port where the local server will serve all projects.</div>
            <div class="overlay-form-item required" id="port-number-error">The server port must contain only numbers.</div>
            <div class="overlay-form-item-heading">Diagnostic & Usage Data:</div>
            <div class="overlay-form-item">
                <label class="topcoat-checkbox">
                    <input type="checkbox" id="sendUsage">
                    <div class="topcoat-checkbox__checkmark"></div>
                </label>
                <span class="settings-ip-label" style="padding-left: 3px;">Send anonymous diagnostic & usage data</span>
            </div>
            <div class="overlay-form-item overlay-form-item-description">Help us improve by automatically sending anonymous diagnostic & usage data.</div>
            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item">
                <button id="cancelSettings" class="cancel-button">Cancel</button>
                <button id="saveSettings" class="action-button">Save</button>
            </div>
        </aside>

        <aside id="serverLogOverlay" class="server-log-overlay">
            <div class="overlay-form-item">Server Log</div>
            <div class="overlay-form-item">
                <textarea id="serverLog" name="serverLog" readonly class="server-log-textarea"></textarea>
            </div>
            <div class="overlay-form-item">
                <button id="closeServerLog" class="cancel-button" style="float: left;">Close</button>
                <button id="clearServerLog" class="action-button" style="float: right;">Clear</button>
            </div>
        </aside>

        <aside id="projectDetailsOverlay" class="project-details-overlay">
            <div class="overlay-form-item"><span class="overlay-wizard-text">STEP 2 OF 2 &nbsp;&nbsp;|</span>&nbsp;&nbsp; PROJECT DETAILS</div>
            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item-heading" id="project-details-path-label">Local path:</div>
            <div class="overlay-form-item">
                <span id="project-path-border" class="tooltip">
                    <span class="tooltiptext"></span>
                    <img id="project-path-warning-icon" src="img/icons/normal/warning.svg" />
                    <div id="projectPath" class="overlay-form-item-description italics project-path-label">
                    </div>
                </span>

                <button id="chooseNewProjectPath" class="project-details-choose-button">Choose ...</button>
            </div>
            <div class="overlay-form-item"></div>
            <div class="overlay-form-item overlay-form-item-description">This is where the project will be stored on your computer.</div>
            <div class="overlay-form-item overlay-form-item required" id="project-path-error-message">You must choose a local path where your project will be created.</div>

            <div class="overlay-form-item-heading" id="project-details-name-label">Name:</div>
            <div class="overlay-form-item">
                <input type="text" id="projectName" class="text-input project-input-field" />
            </div>
            <div class="overlay-form-item overlay-form-item-description">The display name for your app.</div>
            <div class="overlay-form-item overlay-form-item required" id="project-name-error-message">You must give your new project a name.</div>

            <div class="overlay-form-item-heading" id="project-details-id-label">ID: <span class="overlay-form-item-description">(optional)</span></div>
            <div class="overlay-form-item">
                <input type="text" id="project-id" class="text-input project-input-field" placeholder="com.phonegap.helloworld" />
            </div>
            <div class="overlay-form-item overlay-form-item-description">The unique identifier across app stores. We recommend you use a reverse domain namespace format, for example: com.phonegap.helloworld</div>
            <div class="overlay-form-item overlay-form-item required" id="project-id-error-message">App ID contains a reserved word, or is not a valid identifier.</div>

            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item">
                <button id="cancelNewProject" class="cancel-button">Cancel</button>
                <div style="width: 178px; float: right;">
                    <button id="backNewProject" class="cancel-button">Back</button>
                    <button id="addNewProject" class="action-button">Create project</button>
                </div>
            </div>
        </aside>

        <aside id="templateOverlay" class="template-overlay">
            <div class="overlay-form-item"><span class="overlay-wizard-text">STEP 1 OF 2 &nbsp;&nbsp;|</span>&nbsp;&nbsp; SELECT A TEMPLATE</div>
            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item" style="overflow: hidden;">
                <div id="templateList" class="template-list"></div>
            </div>
            <div class="overlay-form-item">
                <hr class="dotted-hr" />
            </div>
            <div class="overlay-form-item">
                <button id="cancelTemplate" class="cancel-button">Cancel</button>
                <button id="nextTemplate" class="action-button">Next</button>
            </div>
        </aside>

        <aside id="createOpenProjectOverlay" class="create-overlay">
            <div id="createProject" class="flyout-top-button">Create new PhoneGap project...</div>
            <div class="create-open-separator-spacer"><hr class="dotted-hr" /></div>
            <div id="openProject" class="flyout-button">Open existing PhoneGap project...</div>
        </aside>

        <aside id="helpOverlay" class="help-overlay">
            <div id="about" class="flyout-top-button">About</div>
            <div class="create-open-separator-spacer"><hr class="dotted-hr" /></div>
            <div id="tutorials" class="flyout-button">Tutorials</div>
            <div class="create-open-separator-spacer"><hr class="dotted-hr" /></div>
            <div id="reportIssue" class="flyout-button">Report Issue</div>
            <div class="create-open-separator-spacer"><hr class="dotted-hr" /></div>
            <div id="termsOfUse" class="flyout-button">Terms of Use</div>
            <div class="create-open-separator-spacer"><hr class="dotted-hr" /></div>
            <div id="privacyPolicy" class="flyout-button">Privacy Policy</div>
        </aside>

        <div class="row container" style="overflow-x: hidden; overflow-y: hidden;" id="sideMenu">
            <div class="column-2-hand sidebar">
                <div id="plus-holder" class="box-row center-hand sidebar-button-holder" onMouseOver="imgSwapper('plus-icon', 'img/icons/hover/plus-hover.svg');">
                    <button id="plus" class="sidebarbutton" title="Add / Open Project">
                        <img id="plus-icon" src="img/icons/normal/plus.svg" />
                    </button>
                </div>
                <div id="minus-holder" class="box-row center-hand sidebar-button-holder-inactive">
                    <button id="minus" class="sidebar-button-inactive" title="Remove Project">
                        <img id="minus-icon" src="img/icons/inactive/minus-inactive.svg" />
                    </button>
                </div>
                <div id="settings-holder" class="box-row center-hand sidebar-button-holder" onMouseOver="imgSwapper('settings-icon', 'img/icons/hover/settings-hover.svg');">
                    <button id="settings" class="sidebarbutton" title="Settings">
                        <img id="settings-icon" src="img/icons/normal/settings.svg" />
                    </button>
                </div>
                <div id="log-holder" class="box-row center-hand sidebar-button-holder" onMouseOver="imgSwapper('log-icon', 'img/icons/hover/log-hover.svg');" onMouseOut="imgSwapper('log-icon', 'img/icons/normal/log.svg');">
                    <button id="log" class="sidebarbutton" title="View Server Log" disabled>
                        <img id="log-icon" src="img/icons/normal/log.svg" />
                    </button>
                </div>
                <div id="help-holder" class="box-row center-hand sidebar-button-holder" onMouseOver="imgSwapper('help-icon', 'img/icons/hover/help-hover.svg');" onMouseOut="imgSwapper('help-icon', 'img/icons/normal/help.svg');">
                    <button id="help" class="sidebarbutton" title="Help">
                        <img id="help-icon" src="img/icons/normal/help.svg" />
                    </button>
                </div>
            </div>
            <div class="column-10-hand">
                <div id="guide-add">
                    <div class="dropzone-content">
                        <img src="img/icons/normal/dragdrop.svg" />
                        <div>Drop PhoneGap</div>
                        <div>project folders here</div>
                    </div>
                </div>
                <div id="drop_zone" class="box-row dropzone"></div>
                <div class="notification-bar" id="notification-bar">
                    <div style="padding-left: 15px; padding-top: 15px;" id="notification-text"></div>
                </div>
            </div>
            <input type="hidden" id="projectDirectory">
        </div>

        <div class="status-field" id="status-field"><div id="server-status-label">Server is offline</div></div>

        <div class="ip-holder" id="ip-holder"><div class="ip-list" id="ip-list"></div></div>

        <script type="text/javascript" src="js/requireStuff.js"></script>

        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>

        <script type="text/javascript" src="http://localhost:35729/livereload.js"></script>

        <script type="text/javascript" src="js/error-notification.js"></script>
        <script type="text/javascript" src="js/file-menu.js"></script>
        <script type="text/javascript" src="js/sidebar-handlers.js"></script>
        <script type="text/javascript" src="js/server-status.js"></script>
        <script type="text/javascript" src="js/drag-n-drop-handlers.js"></script>
        <script type="text/javascript" src="js/project-create-open-handlers.js"></script>
        <script type="text/javascript" src="js/project-creation-form-validation.js"></script>
        <script type="text/javascript" src="js/project-widget.js"></script>
        <script type="text/javascript" src="js/local-storage.js"></script>
        <script type="text/javascript" src="js/settings-handlers.js"></script>
        <script type="text/javascript" src="js/utils.js"></script>
        <script type="text/javascript" src="js/loader.js"></script>
        <script type="text/javascript" src="js/auto-updater.js"></script>
        <script type="text/javascript" src="js/templates.js"></script>
        <script type="text/javascript" src="js/ga/GALocalStorage.js"></script>
        <script type="text/javascript" src="js/ga/gaTracking.js"></script>
        <script type="text/javascript" src="js/analytics.js"></script>
        <script type='text/javascript' src="main.js"></script>

    </body>
</html>
